<template>
	<view class="container">
		<view class="top-wrapper">
			<CustomNavBar class="title">
				<template v-slot:center>
					<text
						class='title-text'>{{orderCompleteDetails.title||'--'}}-{{orderCompleteDetails.serviceStatusName||'--'}}</text>
				</template>
				<template v-slot:left>
					<view class="back uni-flex uni-align-center uni-justify-center" @click="goBack">
						<uni-icons type="left" size="20" color="#333333"></uni-icons>
					</view>
				</template>
			</CustomNavBar>
		</view>

		<view class="content">
			<view class="content-top">
				<view class="all-Tobeconfirmed-container">
					<!-- 实际卡片 -->
					<view class="all-Tobeconfirmed">
						<view class="service-time-box">
							<text class='left-text'>订单编号</text>
							<text class='right-text'>{{orderCompleteDetails.id||'--'}}</text>
						</view>
						<view class="service-time-box">
							<text class='left-text'>订单日期</text>
							<text
								class='right-text'>{{busOrderServices.length > 0 ? (busOrderServices[0].endTime || '--') : '--'}}</text>
						</view>
						<view class="service-time-box">
							<view class="service-contact">
								<text class='left-text'>联系人</text>
							</view>
							<view class="right-box">
								<text class='right-text'>{{servicePosition.name||'--'}}</text>
								<image :src="`${$ImgBaseUrl}service-detail-phone.png`" class='phone' @click="handleCall"
									:data-phone="servicePosition.phone||''" />
							</view>
						</view>
						<view class="service-time-box">
							<text class='left-text'>服务时间</text>
							<text
								class='right-text'>{{busOrderServices.length > 0 ? (busOrderServices[0].startTime || '--') : '--'}}
								<text class='state'>可预约</text>
							</text>
						</view>
						<view class="service-time-box">
							<text class='left-text'>服务地址</text>
							<text class='right-text'>{{servicePosition.address||'--'}}</text>
						</view>

						<view class="notes-box">
							<text class='left-text'>备注</text>
							<text
								class='right-text'>{{orderCompleteDetails.remark===null||orderCompleteDetails.remark===''?'-':orderCompleteDetails.remark}}</text>
						</view>
					</view>
				</view>
			</view>

			<view class="content-center">
				<view class="service-matter">
					<view class="custom-steps">
						<view class="step-item" v-for="(item, index) in list" :key="index"
							:class="{ 'inactive-step': index > active }">
							<view class="step-circle" :class="{ active: index <= active }">
								<!-- <uni-icons v-if="index <= active" type="checkbox-filled" size="16"
									color="#fff"></uni-icons> -->
								<image v-if="index <= active && list[index].desc !== '--'"
									:src="`${$ImgBaseUrl}step-icon.png`" class='step-icon' />
								<view class='step-icon2' v-else></view>
							</view>
							<view class="step-content">
								<text class="step-title">{{ item.title||'--' }}</text>
								<text class="step-desc">{{ item.desc||'--' }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="order-settlement">
				<view class="content-settlement">
					<view class='title'>订单结算 <image :src="`${$ImgBaseUrl}unknown.png`" class='unknown'></image>
					</view>
					<view class="text-content">
						<text class='left-text'>本单收入</text>
						<text class='right-text'>￥{{Ordersettlement.currentIncome}}</text>
					</view>
					<view class="text-content">
						<text class='left-text'>订单收入</text>
						<text class='right-text'>¥{{Ordersettlement.orderIncome}}</text>
					</view>
					<view class="text-content">
						<text class='left-text'>平台补贴</text>
						<text class='right-text'>¥{{Ordersettlement.platformSubsidy}}</text>
					</view>
					<!-- <view class="text-content">
						<text class='left-text'>客户打赏</text>
						<text class='right-text'>¥{{Ordersettlement.customerTip}}</text>
					</view> -->
				</view>
				<view class="line">

				</view>
				<view class="content2">
					<!-- <view class="text-content">
						<text class='left-text'>商业险代缴</text>
						<text class='right-text'>-¥{{Ordersettlement.commercialInsurance}}</text>
					</view> -->
					<view class="text-content">
						<text class='left-text'>税务代缴</text>
						<text class='right-text'>-¥{{Ordersettlement.taxBehalfPayment}}</text>
					</view>
					<!-- <view class="text-content">
						<text class='left-text'>社保代扣</text>
						<text class='right-text'>-¥{{Ordersettlement.socialBehalfPayment}}</text>
					</view> -->
					<view class="text-content">
						<text class='left-text'>服务扣罚</text>
						<text class='right-text'>-¥{{Ordersettlement.serviceDeduction}}</text>
					</view>
					<view class="content2-bottom">
						<view class="content2-bottom-box">
							<text class='text-item'>您对收入有疑问或异议请联系客服</text>
							<view class="lianxi">
								<image :src="`${$ImgBaseUrl}ContactCustomerService.png`" class='ContactCustomerService'>
								</image>
								<text>联系客服</text>
							</view>
						</view>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
	} from "vue";
	import CustomNavBar from "@/components/custom-navbar/index.vue";
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		orderDetail
	} from "@/api/serviceOrder.js";
	const orderCompleteDetails = ref({})
	const servicePosition = ref({})
	const busOrderServices = ref([])
	const Ordersettlement=ref({})

	const active = ref(1); // 当前激活的步骤索引
	const list = ref([{
			title: '接单时间',
			desc: ''
		},
		{
			title: '预约时间',
			desc: ''
		},
		{
			title: '到达时间',
			desc: ''
		},
		{
			title: '结束时间',
			desc: ''
		},
		{
			title: '结算时间',
			desc: ''
		}
	]);
	// 页面加载时获取参数
	onLoad(async (options) => {
		const orderId = options.id; // 假设从路由获取
		if (!orderId) {
			uni.showToast({
				title: "订单ID不能为空",
				icon: "none"
			});
			return;
		}

		try {
			const res = await orderDetail(orderId); // 直接传 orderId
			console.log("订单详情:", res.data);
			if (res.code === 200) {
				orderCompleteDetails.value = res.data
				servicePosition.value = res.data.orderAddress
				busOrderServices.value = res.data.busOrderServices
				Ordersettlement.value=res.data.orderSettlementInfo
				list.value[0].desc = res.data.connectTime || '--'; // 下单时间
				list.value[1].desc = res.data.advanceTime || '--'; // 预约时间
				list.value[2].desc = res.data.reachTime || '--'; // 到达时间
				list.value[3].desc = res.data.endTime || '--'; // 结束时间
				list.value[4].desc = res.data.settlementTime || '--'; //结算时间

				// 动态计算 active：找到最后一个有有效数据的步骤索引
				let maxActiveIndex = -1;
				list.value.forEach((item, index) => {
					// 如果 desc 有值（不是 '--' 或 ''），则当前步骤已完成
					if (item.desc !== '--' && item.desc !== '') {
						maxActiveIndex = index; // 更新最大激活索引
					}
				});
				// 更新 active 的值（如果有有效步骤，至少激活第一个步骤）
				active.value = maxActiveIndex > -1 ? maxActiveIndex : 0;

			}
		} catch (err) {
			uni.showToast({
				title: "获取订单失败",
				icon: "none"
			});
		}
	});
	const handleCall = (e) => {
		// 从事件对象中获取传递的电话号码（data-phone 的值）
		const phoneNumber = e.currentTarget.dataset.phone;

		// 校验：若电话号码为空，提示用户
		if (!phoneNumber || phoneNumber.trim() === '') {
			uni.showToast({
				title: '未获取到联系人电话',
				icon: 'none',
				duration: 1500
			});
			return;
		}

		// 调用uni-app API唤起系统拨号界面
		uni.makePhoneCall({
			phoneNumber: phoneNumber, // 目标电话号码
			success: () => {
				console.log('唤起拨号界面成功');
				// 可选：拨号成功后的逻辑（如记录日志）
			},
			fail: (err) => {
				// 处理失败场景（如用户点击取消拨号）
				if (err.errMsg === 'makePhoneCall:fail cancel') {
					console.log('用户取消拨号');
					// 可选：用户取消时无需提示，避免干扰
				} else {
					// 其他错误（如设备不支持拨号）
					uni.showToast({
						title: '拨号失败，请稍后重试',
						icon: 'none',
						duration: 1500
					});
					console.error('拨号失败:', err);
				}
			}
		});
	};
	const goBack = () => {
		uni.navigateBack({
			delta: 1,
		});
	};
</script>

<style lang="scss" scoped>
	.container {
		display: flex;
		flex-direction: column;
		background-color: #f5f5f5;
		box-sizing: border-box;
		// height: 100vh;

		.top-wrapper {
			background-color: #fff;
			flex-shrink: 0;

			.title {
				.title-text {
					color: #303133;
					font-size: 36rpx;
					font-weight: 500;
					display: inline-block;
					max-width: 300rpx;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
				}
			}
		}

		.content {
			padding: 20rpx;
			box-sizing: border-box;
			// height: 100vh;
			margin-bottom: 20rpx;

			.all-Tobeconfirmed-container {
				position: relative;
				// padding: 20rpx 0;
				margin-bottom: 20rpx;

				// 堆叠样式
				.all-Tobeconfirmed {
					z-index: 3;
					width: 100%;
					height: auto;
					min-height: 450rpx;
					border-radius: 20rpx;
					background-color: #fff;
					padding: 25rpx;
					box-sizing: border-box;
					display: flex;
					flex-direction: column;
					justify-content: space-between;


					.service-time-box {
						width: 100%;
						display: flex;
						justify-content: space-between;
						align-items: center;

						.left-text {
							font-weight: 400;
							font-size: 30rpx;
							color: #666666;

						}

						.right-box {
							width: 140rpx;
							display: flex;
							align-items: center;
							justify-content: space-between;

							.right-text {
								font-weight: 400;
								font-size: 30rpx;
								color: #333333;


							}

							.phone {
								width: 38rpx;
								height: 38rpx;
							}
						}

						.right-text {
							font-weight: 400;
							font-size: 30rpx;
							color: #333333;

							.state {
								font-size: 30rpx;
								color: #FF6A47;
								font-weight: 400;
							}

						}



						.service-contact {
							width: 480rpx;
							display: flex;
							align-items: center;
							justify-content: space-between;


							.left-text {
								font-weight: 400;
								font-size: 30rpx;
								color: #666666;
							}
						}

					}

					.notes-box {
						width: 100%;
						display: flex;
						justify-content: space-between;
						align-items: center;

						.left-text {
							font-weight: 400;
							font-size: 30rpx;
							color: #666666;

						}

						.right-text {
							font-weight: 400;
							font-size: 30rpx;
							color: #333333;

						}
					}
				}


			}

			// 步骤条样式
			.content-center {
				margin-bottom: 20rpx;

				.service-matter {
					width: 100%;
					height: 500rpx;
					// min-height: 873rpx;
					background-color: #fff;
					border-radius: 20rpx;
					padding: 25rpx;
					box-sizing: border-box;

					.custom-steps {
						.step-item {
							display: flex;
							align-items: center;
							margin-bottom: 40rpx;
							position: relative;
							height: 60rpx;




							&:last-child {
								margin-bottom: 0;

								&::after {
									display: none;
								}
							}

							&::after {
								content: '';
								position: absolute;
								left: 15rpx;
								top: 40rpx;
								height: 100%;
								width: 1rpx;
								background-color: #E2E2E2;
								z-index: 1;
							}

							// 或者使用这种方式
							&.inactive-step {

								.step-title,
								.step-desc {
									color: #999999;
									font-size: 26rpx;
									font-weight: 400;
								}
							}
						}

						.step-circle {

							margin-right: 20rpx;


							.step-icon {
								width: 34rpx;
								height: 34rpx;
							}

							.step-icon2 {
								margin-left: 8rpx;
								width: 16rpx;
								height: 16rpx;
								border-radius: 100%;
								border: 2rpx solid #999999;
							}


						}

						.step-content {
							display: flex;
							// flex-direction: column;
							justify-content: space-between;
							width: 100%;

							.step-title {
								font-size: 30rpx;
								color: #333;
								margin-bottom: 8rpx;
								font-weight: 500;
							}

							.step-desc {
								font-size: 26rpx;
								color: #999;
								font-weight: 400;
							}
						}
					}
				}
			}

			.order-settlement {
				height: 740rpx;
				width: 100%;
				background-color: #fff;
				border-radius: 20rpx;
				padding: 25rpx;
				box-sizing: border-box;

				.content-settlement {
					height: 45%;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.title {
						font-size: 34rpx;
						font-weight: 500;
						color: #333;

						.unknown {
							width: 30rpx;
							height: 30rpx;
						}
					}

					.text-content {
						width: 100%;
						display: flex;
						justify-content: space-between;
						align-items: center;

						.left-text {
							font-weight: 400;
							font-size: 28rpx;
							color: #333;
						}

						.right-text {
							color: #333333;
							font-weight: 500;
							font-size: 28rpx;
						}
					}
				}

				.line {
					border: 1rpx solid #E2E2E2;
					margin: 20rpx 0rpx;
				}

				.content2 {
					height: 50%;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.title {
						font-size: 34rpx;
						font-weight: 500;
						color: #333;
					}

					.text-content {
						width: 100%;
						display: flex;
						justify-content: space-between;
						align-items: center;

						.left-text {
							font-weight: 400;
							font-size: 28rpx;
							color: #333;
						}

						.right-text {
							color: #333333;
							font-weight: 500;
							font-size: 28rpx;
						}
					}

					.content2-bottom {
						width: 100%;

						.content2-bottom-box {
							display: flex;
							justify-content: flex-end;

							.text-item {
								font-weight: 400;
								font-size: 24rpx;
								color: #999999;
								margin-right: 40rpx;
							}

							.lianxi {
								color: #999999;
								width: 157rpx;
								height: 40rpx;
								border-radius: 20rpx;
								border: 1rpx solid #999999;
								display: flex;
								align-items: center;
								justify-content: space-around;
								font-size: 24rpx;

								.ContactCustomerService {
									width: 24rpx;
									height: 22rpx;
								}
							}
						}
					}
				}
			}
		}
	}

	::v-deep .uni-steps__column-text {
		display: flex !important;
		flex-direction: row;
		justify-content: space-between;
		height: 80rpx;
	}

	::v-deep .uni-steps__column-title {
		// color: #333;
		font-size: 30rpx;
		font-weight: bold;
	}

	::v-deep .uni-steps__column-desc {
		font-weight: 500;
		font-size: 26rpx;
		color: #999999;
	}

	::v-deep .uni-steps__column-text {
		border: none;
	}
</style>